<template>
  <div class="patrolTable-root">
    <formTitleVue
      title="监测数据分析"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div class="select-ul">
      <el-cascader :options="cascader_options" @change="changeCascader"></el-cascader>
    </div> -->
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="typeName" label="设施类型">
        </el-table-column>
        <el-table-column prop="smallType" label="专题细类">
        </el-table-column>
        <el-table-column prop="largeType" label="专题大类">
        </el-table-column>
        <el-table-column prop="num" label="数量">
        </el-table-column>
        <el-table-column prop="threeCompare" label="同比（近三年）">
          <template slot-scope="scope">
            <compareIcon :nowNum="scope.row.three" :compareNum="scope.row.threeCompare"/>
          </template>
        </el-table-column>
        <el-table-column prop="fiveCompare" label="同比（近五年）">
          <template slot-scope="scope">
            <compareIcon :nowNum="scope.row.five" :compareNum="scope.row.fiveCompare"/>
          </template>
        </el-table-column>
        <el-table-column prop="oneCompare" label="环比（近一年）">
          <template slot-scope="scope">
            <compareIcon :nowNum="scope.row.one" :compareNum="scope.row.oneCompare"/>
          </template>
        </el-table-column>
        
      </el-table>
    </div>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import gdAreaSelectVue from "@/components/GdAreaSelect/GdAreaSelect.vue";
import { api_realHistoryMonitorDataAnalysis,api_cascader } from '@/api/jcfx/jcsjtj.js'
import compareIcon from "@/components/compareIcon/compareIcon.vue"

export default {
  name: "patrolTable",
  components: {
    formTitleVue,gdAreaSelectVue,compareIcon,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "",
          options:[
            // { label: "近一月", value: "近一月" },
            // { label: "近半年", value: "近半年" },
            // { label: "近一年", value: "近一年" },
          ]
        }
      ],
      searchForm: {
        bModeType: '',
        areaCode: this.$store.state.account.user.deptIds,
      },
      tableData: [],
      cascader_options: [],
    };
  },
  methods: {
    selectChange(item) {
      this.searchForm.bModeType = item
      this.getData()
    },
    getData(){
      api_realHistoryMonitorDataAnalysis(this.searchForm).then(res => {
        this.tableData = res.data
      })
    },
    getDict(){
      // 获取字典值
      this.alarmBclassify_options = []
      this.$commonJs.filterDataDict("alarmBclassify", this.alarmBclassify_options)
      console.log(this.alarmBclassify_options)
      // 后台返回的字典没有value，需要手动添加
      this.alarmBclassify_options.forEach(item => {
        item.value = item.valueText
      })
      this.alarmBclassify_options.unshift({label: '全部', value: ''})
      this.selectOptions[0].selectValue = this.alarmBclassify_options[0].value
      this.selectOptions[0].options = this.alarmBclassify_options
    },
  },
  mounted(){
    this.getDict()
    this.selectChange(this.selectOptions[0].selectValue)
  }
};
</script>

<style lang="scss" scoped>
.patrolTable-root {
  .select-ul {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 0;
    .select-li {
      width: 200px;
      margin-right: 12px;
    }
  }
}
</style>
